<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .demo {
            margin-bottom: 20px;
            border: 1px solid #ebedf0;
            border-radius: 2px;
            padding: 10px;
        }

        .demo div {
            margin-bottom: 10px;
            font-size: 14px;
        }

        .pagination {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-size: 14px;
            line-height: 1.5;
            list-style: none;
            display: inline-block;
        }

        .pagination.hide {
            display: none;
        }

        .pagination li {
            position: relative;
            display: block;
            float: left;
            height: 32px;
            margin: 0;
            padding: 0 15px;
            line-height: 30px;
            background: #fff;
            border: 1px solid #d9d9d9;
            border-top-width: 1.02px;
            border-left: 0;
            cursor: pointer;
            transition: color 0.3s, border-color 0.3s;
        }

        .pagination li:first-child {
            border-left: 1px solid #d9d9d9;
            border-radius: 4px 0 0 4px;
        }

        .pagination li:last-child {
            border-radius: 0 4px 4px 0;
        }

        .pagination li:first-child {
            box-shadow: none !important;
        }

        .pagination li.current {
            border-color: #1890ff;
            color: #1890ff;
            border-left: 1px solid #1890ff;
        }

        .pagination li.current:not(:first-child) {
            margin-left: -1px;
        }
    </style>
</head>

<body>
    <div>
        <div id="jsContainer">
            <ul class="pagination">
                <li>首页</li>
                <li>8</li>
                <li>9</li>
                <li class="current">10</li>
                <li>11</li>
                <li>12</li>
                <li>末页</li>
            </ul>
        </div>

        <div class="demo">
            <div>(Demo1) total: 10，current: 4</div>
            <ul class="pagination">
                <li>首页</li>
                <li>2</li>
                <li>3</li>
                <li class="current">4</li>
                <li>5</li>
                <li>6</li>
                <li>末页</li>
            </ul>
        </div>

        <div class="demo">
            <div>(Demo2) total: 0，current: 0</div>
            <ul class="pagination hide"></ul>
        </div>

        <div class="demo">
            <div>(Demo3) total: 3，current: 2</div>
            <ul class="pagination">
                <li>1</li>
                <li class="current">2</li>
                <li>3</li>
            </ul>
        </div>

        <div class="demo">
            <div>(Demo4) total: 10，current: 2</div>
            <ul class="pagination">
                <li>1</li>
                <li class="current">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>末页</li>
            </ul>
        </div>

        <div class="demo">
            <div>(Demo5) total: 10，current: 9</div>
            <ul class="pagination">
                <li>首页</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li class="current">9</li>
                <li>10</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        function Pagination(container, total, current) {
            this.total = total;
            this.current = current;
            this.html = html;
            this.val = val;
            // 创建分页组件根节点，是创建一个新节点，不是获得已存在的节点
            this.el = document.createElement('ul');
            if (!this.el) return;

            this.el.innerHTML = this.html();
            container.appendChild(this.el);
            // 判断是否需要隐藏当前元素
            this.el.className = this.total <= 1 ? 'pagination hide' : 'pagination';

            function html() {
                // 小于等于1，不需要显示
                if (this.total <= 1) return '';
                // 小于5，直接渲染输出
                let liList = '';
                if (this.total <= 5) {
                    for (let i = 1; i <= this.total; i++) {
                        liList += `<li ${i === current ? 'class = "current"' : ''}>${i}</li>`;
                    }
                    return liList;
                }
                // 大于5，找到左边界和右边界，并考虑是否需要首末页提示
                // 左边界最小为1， 右边界最大为total
                let left = Math.max(this.current - 2, 1);
                let right = Math.min(this.current + 2, this.total);
                // 长度不足5，补到5，注意不能超过边界
                while (right - left < 4) {
                    left === 1 ? right++ : left--;
                }
                // 渲染5个li
                for (let i = left; i <= right; i++) {
                    liList += `<li ${i === current ? 'class = "current"' : ''}>${i}</li>`;
                }
                // 拼接首末页，使用模板表达式简化代码
                liList = `${left !== 1 ? '<li>首页</li>' : ''}${liList}${right !== this.total ? '<li>末页</li>' : ''}`;
                return liList;
            }

            function val(current) {
                if (arguments.length === 0) return this.current;
                if (current < 1 || current > this.total || current === this.current) return;
                this.current = current;
                this.el.innerHTML = this.html();
            };
        }

    </script>
</body>

</html>